<template>
  <div id="app">
    <div class="contents">
      <transition :name="cutMotion" :duration="{ enter: 500, leave: 0 }">
        <router-view></router-view>
      </transition>
    </div>
    <TabBar v-show="tabBarIsShow" :tab-key="tabBarKey"></TabBar>
  </div>
</template>

<script>
import TabBar from "./components/nav/TabBar";

export default {
  name: "App",
  // eslint-disable-next-line
  data() {
    return {
      cutMotion: "", // 切换动作
      tabBarKey: 0,
      tabBarIsShow: false
    };
  },
  watch: {
    $route(to, from) {
      // console.log(to); // 当前路由
      //console.log(from); // 离开的路由
      if (to.meta.view === "TabBar") {
        this.tabBarIsShow = true;
        this.tabBarKey = to.query.key ? parseInt(to.query.key) : 0;
        this.cutMotion =
          to.meta.key < from.meta.key ? "test-left" : "test-right";
      } else {
        this.tabBarIsShow = false;
      }
    }
  },
  components: {
    TabBar
  },
  created() {}
};
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  list-style: none;
}
a {
  text-decoration: none;
  color: #000000;
}
#app {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: black;
  .contents {
    width: 100%;
    overflow: hidden; // 自适应高度 解决切换时底部tabbar 闪烁
    z-index: 99;
    flex: 1;
  }
}
// 动画
.test-left-enter {
  transform: translate(-100vw, 0);
}
.test-left-leave-to {
  transform: translate(100vw, 0);
}
.test-left-enter-active,
.test-left-leave-active {
  transition: all ease-in 0.2s;
}
.test-left-enter-to {
  transform: translate(0, 0);
}
.test-left-leave {
  transform: translate(0, 0);
}

.test-right-enter {
  transform: translate(100vw, 0);
}
.test-right-leave-to {
  transform: translate(-100vw, 0);
}
.test-right-enter-active,
.test-right-leave-active {
  transition: all ease-in 0.2s;
}
.test-right-enter-to {
  transform: translate(0, 0);
}
.test-right-leave {
  transform: translate(0, 0);
}
</style>
